<template>
  <div>
    <el-button class="button-new-tag" icon="el-icon-plus" size="small" @click="open()" v-if="!disabled">
      选择超级企微
    </el-button>
    <div style="margin-bottom: 10px;">
      <div v-for="(item, index) in value" :key="index">
        {{ item.userName }}
        <el-button size="mini" type="text" :disabled="disabled" @click="value.splice(index, 1)">删除</el-button>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="选择超级企微" width="1100px">
      <NormalForm :formList="formList" :isShowCard="false" :enum-opt.sync="enumOpt"
                  :operateForm="queryForm" @handleReset="handleReset" @handleQuery="handleQuery"></NormalForm>
      <el-row class="row-radar">
        <el-col :span="6">
          <div class="mt-20">
            <el-tree ref="tree" v-loading="treeLoading" :data="treeData" :expand-on-click-node="false" :props="treeProps"
                     default-expand-all highlight-current @node-click="handleNodeClick">
              <div slot-scope="{ node, data }" class="custom-tree-node">
                <el-tooltip v-if="node.label.length > 8" :content="node.label" effect="dark" placement="bottom">
                  <span class="label-info">{{ node.label }}</span>
                </el-tooltip>
                <span v-else>{{ node.label }}</span>
              </div>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="18" style="border-left: 1px solid #eee; padding: 16px 15px 20px 15px;">
      <el-table ref="multipleTable" v-loading="loading" :data="tableList" height="442px"
                style="width: 100%" @select="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="部门" min-width="140px" prop="department"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="头像/昵称" prop="alias" min-width="200">
          <template slot-scope="{ row }">
            <div style="display: flex;align-items: center;justify-content: center">
              <img v-if="row.headImageUrl" :src="row.headImageUrl" alt=""
                   style="width:30px; height:30px;border-radius:50%;margin-right:6px">
              <span style="line-height: 30px">{{ row.alias }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="企业员工" min-width="120px" prop="userName"
                         show-overflow-tooltip></el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/organization";
import {categoryList} from "@/api/article/group";
import { automateList } from '@/api/escrowAccount/index'

export default {
  name: 'checkDigitalEmployee',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    isSingleOption: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      visible: false,
      queryForm: {
        name: '',
        status: '1',
        weUserId: '',
        pageNum: 1,
        pageSize: 20,
      },
      treeData: [
        {
          id: '',
          name: '全部',
          parentId: 0,
          hasParent: false,
          hasChildren: true,
          children: []
        },
      ],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      treeLoading: false,
      formList: [
        {
          label: '昵称',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: '',
          xl: 6,
          lg: 8,
        },
        {
          label: '在线状态',
          value: '1',
          prop: 'status',
          type: 'SELECT',
          emunName: 'statesList',
          xl: 6,
          lg: 8,
        },
        {
          label: '员工',
          value: '',
          prop: 'weUserId',
          type: 'SELECT',
          emunName: 'dialogList',
          xl: 6,
          lg: 8,
        },
      ],
      enumOpt: {
        statesList: [
          {dictLabel: '在线', dictValue: '1'},
          // {dictLabel: '离线', dictValue: '2'},
        ],
        dialogList: [],
      },
      loading: false,
      total: 0,
      tableList: [],
      checkedList: [],
      drainageOpt: {},
      currentGroupId: '',
    }
  },
  mounted() {
  },
  methods: {
    open() {
      this.handleQuery();
      this.visible = true;
      this.getdialogList2()
      this.getNodeFn()
      this.checkedList = JSON.parse(JSON.stringify(this.value))
    },
    ok() {
      if(this.isSingleOption){
        let arr = new Array()
        if(this.checkedList.length > 0) arr.push({...this.checkedList[0]})
        this.visible = false;
        this.$emit('change', arr)
      }else{
        this.visible = false;
        this.$emit('change', this.checkedList)
      }
    },
    handleSelectionChange(selection, val) {
      console.log(selection, val, this.isSingleOption, '123456765')
      if(this.isSingleOption){
        this.$refs.multipleTable.clearSelection();
        if (selection.length == 0) {
          this.selectedRow = [];  // 清空data中绑定的selectedRow
          this.checkedList = []
          return
        };
        // 切换最近一次选择数据的状态
        this.$refs.multipleTable.toggleRowSelection(val, true);
        // 更新data中的selectedRow
        this.checkedList = [{...val, id: val.automateId}];
        // console.log(val);
      }else{
        this.checkedList = []
        selection.forEach(item => {
          console.log(item, '1')
          this.checkedList.push({...item, id: item.automateId})
        })
      }
    },
    // 重置
    handleReset() {
      this.queryForm = {
        status: '1',
        weUserId: '',
        name: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.currentGroupId = ''
      this.getListFn();
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      console.log(this.queryForm, 'queryForm')
      let obj = {
        ...this.queryForm,
        categoryId: this.currentGroupId || ''
      };
      this.loading = true;
      this.checkedList = []
      this.tableList = []
      this.loading = true
      console.log(obj, '都不触发查询？？')
      automateList(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.rows
          this.$nextTick(() => {
            if (this.value.length > 0 && this.tableList.length > 0) {
              this.value.forEach(item => {
                this.tableList.forEach(element => {
                  console.log(element.id, item.automateId, 'element-item')
                  if (element.automateId == item.id) {
                    this.$refs.multipleTable.toggleRowSelection(element);
                  }
                })
              })
            }
          })
          this.total = res.total;
          console.log('tableList', this.tableList);
        }
      }).finally(() => this.loading = false)
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
    // 点击分组
    handleNodeClick(data){
      this.currentGroupId = data.id
      this.getListFn()
    },
    getdialogList2() {
      if (this.enumOpt.dialogList.length == 0) {
        api.getList({
          name: '',
          department: '',
          pageNum: 1,
          pageSize: 99999,
          isActivate: '',
        })
          .then(({rows}) => {
            this.enumOpt.dialogList = rows.map(item => {
              return {
                ...item,
                dictValue: item.userId,
                dictLabel: item.name
              }
            })
            console.log(this.enumOpt.dialogList, 'dialoglist', '数组列')
          })
      }
    },
    // 获取分组数据
    getNodeFn() {
      let params = {
        levelType: '0',
        mediaType: '13',
      }
      categoryList(params).then(res => {
        if (res.code == 200) {
          this.groupTotal = res.data ? res.data.length : 0
          this.$set(this.treeData[0], 'children', res.data)
        }
      })
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep .el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #14D595 !important;
  color: #06c160 !important;
}

::v-deep.el-tag.el-tag--info {
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

::v-deep.el-tag.el-tag--danger {
  background-color: #fdedee !important;
  border-color: #fadcde !important;
  color: #e74e59 !important;
}

::v-deep.el-tag.el-tag--warning {
  background-color: rgba(255, 173, 58, 0.1) !important;
  border-color: #FFAD3A !important;
  color: #FFAD3A !important;
}
</style>
